import { Component, ElementRef, Renderer2 } from '@angular/core';
import { ApesField } from './apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';

@Component({
  selector: 'formly-field-timeLine',
  template: `
    <ng-container *ngFor="let data of timeLineData">
      <div apes-col [apesMd]="24" class="formly-field-timeline">

        <div *ngIf="title != ''" class="formly-field-timeline-title">{{title}}：{{getTitleFormatter(data)}}</div>

        <apes-timeline *ngIf="data.ITEM.length !=0 ">
          <apes-timeline-item *ngFor="let item of data.ITEM;let i = index">
            <div [innerHTML]="getValueFormatter(item)"></div>
<!--            {{getValueFormatter(item)}}-->
          </apes-timeline-item>
        </apes-timeline>

        <div *ngIf="data.ITEM.length ==0 " style="top: -6px; position: relative">无数据</div>

      </div>
    </ng-container>
  `,
  styles: [`
    .formly-field-timeline {
      padding: 16px 16px 0;
      border: 1px solid #bdbaba;
      border-radius: 10px;
      margin-bottom: 10px;
    }

    .formly-field-timeline-title {
      margin-bottom: 10px;
    }
  `],
})
export class FormlyFieldTimeLine extends ApesField {

  key: any;
  timeLineData: any[] = [];
  title: any;

  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService,
              protected elementRef: ElementRef, protected renderer: Renderer2) {
    super(apiService, events, expressionService, subject);
  }

  ngOnInit() {
    this.timeLineData = this.formControl.value;
    this.title = this.to['title'] ? this.to['title'] : '';
  }

  getTitleFormatter(data: any) {
    let expression = this.to['titleFormatter'] ? this.to['titleFormatter'] : 'false';
    return this.expressionService.evaluate(expression, {
      context: this.formState,
      model: this.formState.model,
      data: data,
    });
  }

  getValueFormatter(data: any) {
    let expression = this.to['valueFormatter'] ? this.to['valueFormatter'] : 'false';
    return this.expressionService.evaluate(expression, {
      context: this.formState,
      model: this.formState.model,
      data: data,
    });
  }

}
